<template>
  <van-nav-bar title="运动数据" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="container">
    <p>仅为您展示步行、跑步、骑行三种运动数据</p>
  </div>
  <div class="table">
    <div class="row header-row">
      <div class="cell">时间</div>
      <div class="cell">时长</div>
      <div class="cell">热量(kcal)</div>
      <div class="cell">距离(km)</div>
      <div class="cell">步数</div>
    </div>
    <div class="row data-row">
      <div class="cell">暂无更多数据</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  margin-top: 15px;
}

.table {
  border-collapse: collapse;
  width: 100%;
  height: 100px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.row {
  display: flex;
  height: 50px;
  line-height: 40px;
}

.cell {
  flex: 1;
  text-align: center;
  border: 1px solid lightgray;
  padding: 5px;
}

.header-row {
  background-color: lightblue;
}
</style>
